<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-06-30 15:24:21
 * @LastEditTime: 2021-07-01 14:00:56
-->
<template>
  <div>
    <div class="step3Box">
      <div class="step3Text">
        第一步<br />
        请按照数据模板的格式准备导入房源信息数据
        <div class="stepDownload" @click="reImportTemplate">
          <Icon type="md-download" />下载房源信息数据模板
        </div>
      </div>
      <div class="step3Text">第二步 <br />请填写好房源信息相关内容</div>
      <div class="step3Text">
        第三步<br />
        请上传已填写的“房源信息数据模板”
        <div>
          <Upload :action="upload.reqUrl" :format="['xlsx', 'xls', 'XLS', 'XLSX']" ref="upload"
            :headers="upload.headers" :on-format-error="handleFormatError" :data="upload.data"
            :before-upload="handleBefore" :on-success="handleSuccess"
            :show-upload-list="false">
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </div>
        <span style="display: inline-block; margin-top: 10px">{{
          step3File.name
        }}</span>
      </div>
      <div class="newBuildingFooter">
        <Button @click="importHouseCancel">取消</Button>
        <Button type="info" @click="importHouseOk">确认</Button>
      </div>
    </div>
  </div>
</template>
<script>
  import roomMgr from '@/biz/building/room.js'
  export default {
    name: 'importHouse',
    props: ['buildingId'],
    data() {
      return {
        upload: roomMgr.uploadTemplate({ buildingId: this.buildingId }),

        step3File: '', //上传文件的
      }
    },
    components: {},

    methods: {
      reImportTemplate() {
        roomMgr.downloadTemplate({
          buildingId: this.buildingId,
          fileName: '房源信息数据模板.xls'
        })
      },

      importHouseCancel() {
        this.step3File = ''
        this.$emit('onClose')
      },
      importHouseOk() {
        if (this.step3File) {
          // this.dataParams.buildingId = this.buildingId
          this.$refs.upload.post(this.step3File)
        } else {
          this.$Message.warning('请上传已填写的“房源信息数据模板”')
        }
      },

      // 导入格式判断
      handleFormatError(file) {
        this.$Message.error('只支持上传Excel表格！')
      },

      // 导入前
      handleBefore(file) {
        console.log(file, '导入的文件')
        this.step3File = file
        return false
      },

      // 上传成功
      handleSuccess(res, file) {
        if (res.code == 500) {
          this.$Message.error(res.msg)
          console.log('500')
        } else {
          this.$Message.success('数据导入成功！')
          this.$emit('onClose')
          this.$emit('onSearch')
          this.step3File = ''
        }
        console.log(res, file, '上传成功')
      },
    },

    mounted() {},
    created() {},
    beforeMount() {},
  }
</script>
<style lang='scss' scoped>
  .step3Box {
    padding: 0 50px 20px;

    .step3Text {
      margin-top: 30px;
      line-height: 1.5;

      >div {
        margin-top: 10px;
      }

      .stepDownload {
        cursor: pointer;
        color: #2d8cf0;
        display: block;
        margin: 10px 0;
      }
    }
  }

  .newBuildingFooter {
    padding-top: 16px;
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }
</style>